<template>
    <div class="home com-class">
        <div class="left-div">
            <div class="container left-1">
                <p class="title">监测预警情况</p>
                <div class="c-left">
                    <span floor><span number>1200</span> 件</span>
                    <span floor>2020年预警总数</span>
                    <span floor>同比&nbsp;&nbsp;<span percent class="font-color-red">23%<a class="jiantou-img data-up"></a></span></span>
                </div>
                <div class="c-right" ref="echartLeft1"></div>
            </div>
            <div class="container left-1">
                <p class="title">自然灾害</p>
                <div class="c-left">
                    <span floor><span number>100</span> 件</span>
                    <span floor>本月预警总数</span>
                    <span floor>同比&nbsp;&nbsp;<span percent class="font-color-red">18%<a class="jiantou-img data-up"></a></span></span>
                </div>
                <div class="c-right" ref="echartLeft2"></div>
            </div>


            <div class="container left-1 heigher">
                <p class="title">生命线较大事故</p>
                <div class="c-left">
                    <span floor><span number>140</span> 件</span>
                    <span floor>本月预警总数</span>
                    <span floor>同比&nbsp;&nbsp;<span percent class="font-color-red">18%<a class="jiantou-img data-up"></a></span></span>
                </div>
                <div class="c-right" ref="echartLeft3"></div>
            </div>

        </div>


        <div class="center-div">
            <BaseMap v-if="mapShow" show-type="monitoringWarning" :area-code="$local.getAreaCode()" :area-type="$local.getAreaType()" @changeMapArea="changeMapArea"></BaseMap>
        </div>


        <div class="right-div">
            <div class="container right-1">
                <p class="title">重点区域人流情况</p>
                <div class="echartRight1" ref="echartRight1"></div>
            </div>
            <div class="container right-2">
                <p class="title">网络态势</p>
                <div class="left">
                    <div class="item">
                        <span><span number>200</span>家</span>
                        <span>发现漏洞数</span>
                        <span>同比<span percent class="font-color-red">7%  <a class="jiantou-img data-up"></a></span></span>
                    </div>
                    <div class="item">
                        <span><span number>500</span>家</span>
                        <span>发现漏洞数</span>
                        <span>同比<span percent class="font-color-red">12%  <a class="jiantou-img data-up"></a></span></span>
                    </div>
                </div>
                <div class="right">
                    <p text>漏洞等级比例</p>
                    <div class="echartRight2" ref="echartRight2"></div>
                </div>



            </div>
            <div class="container right-3">
                <p class="title">城市安全舆情</p>
                <p class="option-bar">
                    <span class="option" :class="citySecurity.name == '政务'?'active':''" @click="citySecurity.name = '政务'" >政务</span>
                    <span class="option" :class="citySecurity.name == '媒体'?'active':''" @click="citySecurity.name = '媒体'">媒体</span>
                    <span class="option" :class="citySecurity.name == '教育'?'active':''" @click="citySecurity.name = '教育'">教育</span>
                    <span class="option" :class="citySecurity.name == '快消'?'active':''" @click="citySecurity.name = '快消'">快消</span>
                    <span class="option" :class="citySecurity.name == '金融'?'active':''" @click="citySecurity.name = '金融'">金融</span>
                    <span class="option" :class="citySecurity.name == '旅游'?'active':''" @click="citySecurity.name = '旅游'">旅游</span>
                    <span class="option" :class="citySecurity.name == '医疗'?'active':''" @click="citySecurity.name = '医疗'">医疗</span>
                    <span class="option" :class="citySecurity.name == '教育'?'active':''" @click="citySecurity.name = '教育'">教育</span>
                    <span class="option"><a class="jiantou-img data-omit"></a></span>
                </p>
                <p class="category">
                    <span class="name">{{this.citySecurity.name}}</span>
                    <span class="type">{{this.citySecurity.type}}</span>
                </p>
                <div class="content-row">
                    <p class="item-1"><a class="common-img number-1"></a></p>
                    <p class="item-2">特朗普承认淡化新冠疫情严重性</p>
                    <p class="item-3">15.8<a class="jiantou-img data-up"></a></p>
                </div>
                <div class="content-row">
                    <p class="item-1"><a class="common-img number-2"></a></p>
                    <p class="item-2">银保监会: 分类管理险资债转股投资</p>
                    <p class="item-3">10.7<a class="jiantou-img data-up"></a></p>
                </div>
                <div class="content-row">
                    <p class="item-1"><a class="common-img number-3"></a></p>
                    <p class="item-2">上海对苏浙入境人员实行隔离转运措施</p>
                    <p class="item-3">7.3<a class="jiantou-img data-up"></a></p>
                </div>

            </div>
        </div>

    </div>
</template>

<script>
import BaseMap from '../../../../components/BaseMap/BaseMap'
    export default {
        name: "tufashijian",
        data() {
            return {
                mapShow: true,
                echartDataLeft1: [7,2,4],
                echartDataLeft2: [17,12,14,13,12,11],
                echartDataRight1: [17000,12000,14000,13000],
                echartDataRight2: [130,41,44],
                echartOptionLeft1: {},
                echartOptionLeft2: {},
                echartOptionLeft3: {},
                echartOptionRight1: {},
                echartOptionRight2: {},
                echartObjLeft1: {},
                echartObjLeft2: {},
                echartObjLeft3: {},
                echartObjRight1: {},
                echartObjRight2: {},
                citySecurity: {
                    name: '政务',
                    type: '热度'
                }
            }
        },
        created() {
            let self = this;
            this.echartOptionLeft1 = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    },
                    transitionDuration: 0,//解决echarts图闪动
                },
                legend: {
                    data: [{name:'今年',icon: 'circle'},{name:'去年',icon: 'circle'}],
                    right: '10%'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['1月', '2月', '3月', '4月'],
                        axisTick:{show:false},
                        axisLine:{show:true},
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisTick:{show:false},
                        axisLine:{show:false},
                        splitLine:{show:false},
                        
                    }
                ],
                series: [
                    {
                        name: '今年',
                        type: 'bar',
                        data: [180, 220, 260, 210],
                        color:'gold',
                        barWidth: '20%'
                        
                    },
                    {
                        name: '去年',
                        type: 'bar',
                        data: [120, 132, 101, 134],
                        color:'skyblue',
                        barWidth: '20%'
                    }
                ]
            };
            this.echartOptionLeft2 = {
                title: {
                    text: '世界人口总量',
                    subtext: '数据来自网络',
                    show: false
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    formatter:function(param) {
                        return self.echartTipLeft2(param)
                    },
                    transitionDuration: 0,//解决echarts图闪动
                },
                legend: {
                    data: ['2011年', '2012年'],
                    show: false
                },
                grid: {
                    left: '13%',
                    right: '4%',
                    bottom: '3%',
                    top: '5%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01],
                    show:false
                },
                yAxis: {
                    type: 'category',
                    data: ['气象', '洪涝', '地震'],
                    // data: ['地震', '洪涝', '气象'],
                    axisTick:{show:false},
                    axisLine:{show:false},
                    axisLabel: {
                        fontWeight: 'bold',
                        fontSize: 15
                    }
                },
                series: [
                    {
                        name: '自热灾害',
                        type: 'bar',
                        data: self.echartDataLeft1,
                        color: 'gold',
                        barWidth: 16,
                        itemStyle: {
                            barBorderRadius: [18, 18, 18 ,18]
                        }
                    },
                    {
                        name: '背景',
                        type: 'bar',
                        data: [10, 10, 10], 
                        color: 'rgba(0,0,0,0.1)',
                        barGap:'-100%',
                        barWidth: 16,
                        label: {
                            formatter:function(param){
                                return '{a|' + self.echartLabelLeft1(param) + '}' + ' {b|次}'
                            },
                            rich: {
                                a: {
                                    color: '#F1BC30',
                                    fontFamily: 'Microsoft YaHei',
                                    fontSize: 15
                                },
                                b: {
                                    color: 'black',
                                    fontFamily: 'Microsoft YaHei',
                                    fontSize: 13,
                                    fontWeight: 'bold'
                                }
                            },
                            show:true,
                            position:'right',
                            color:'black'
                        },
                        itemStyle: {
                            barBorderRadius: [18, 18, 18 ,18]
                        }
                        
                    }
                ]
            };
            this.echartOptionLeft3 = {
                title: {
                    text: '世界人口总量',
                    subtext: '数据来自网络',
                    show: false
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    formatter:function(param) {
                        return self.echartTipLeft3(param)
                    },
                    transitionDuration: 0,//解决echarts图闪动
                },
                legend: {
                    data: ['2011年', '2012年'],
                    show: false
                },
                grid: {
                    left: '13%',
                    right: '4%',
                    bottom: '0%',
                    top: '0%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01],
                    show:false
                },
                yAxis: {
                    type: 'category',
                    data: ['管气泄露', '大雨内涝', '断热', '断气', '断水', '断电'],
                    axisTick:{show:false},
                    axisLine:{show:false},
                    axisLabel: {
                        fontWeight: 'bold',
                        fontSize: 15
                    }
                },
                series: [
                    {
                        name: '自热灾害',
                        type: 'bar',
                        data: self.echartDataLeft2,
                        color: '#FF8400',
                        barWidth: 16,
                        itemStyle: {
                            barBorderRadius: [18, 18, 18 ,18]
                        }
                    },
                    {
                        name: '背景',
                        type: 'bar',
                        data: [20, 20, 20, 20, 20, 20], 
                        color: 'rgba(0,0,0,0.1)',
                        barGap:'-100%',
                        barWidth: 16,
                        label: {
                            formatter:function(param){
                                return '{a|' + self.echartLabelLeft2(param) + '}' + ' {b|次}'
                            },
                            rich: {
                                a: {
                                    color: '#F1BC30',
                                    fontFamily: 'Microsoft YaHei',
                                    fontSize: 15
                                },
                                b: {
                                    color: 'black',
                                    fontFamily: 'Microsoft YaHei',
                                    fontSize: 13,
                                    fontWeight: 'bold'
                                }
                            },
                            show:true,
                            position:'right',
                            color:'black'
                        },
                        itemStyle: {
                            barBorderRadius: [18, 18, 18 ,18]
                        }
                        
                    }
                ]
            };
            this.echartOptionRight1 = {
                title: {
                    text: '世界人口总量',
                    subtext: '数据来自网络',
                    show: false
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    formatter:function(param) {
                        return self.echartTipRight1(param)
                    },
                    transitionDuration: 0,//解决echarts图闪动
                },
                legend: {
                    data: ['2011年', '2012年'],
                    show: false
                },
                grid: {
                    left: '5%',
                    right: '0%',
                    bottom: '0%',
                    top: '13%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01],
                    show:false
                },
                yAxis: {
                    type: 'category',
                    data: ['深圳北站', '上海虹桥国际机场', '北京西站', '北京首都国际机场'],
                    axisTick:{show:false},
                    axisLine:{show:false},
                    axisLabel: {
                        fontWeight: 'bold',
                        fontSize: 15
                    }
                },
                series: [
                    {
                        name: '自热灾害',
                        type: 'bar',
                        data: self.echartDataRight1,
                        color: '#FFCC44',
                        barWidth: 16,
                        itemStyle: {
                            barBorderRadius: [18, 18, 18 ,18]
                        }
                    },
                    {
                        name: '背景',
                        type: 'bar',
                        data: [20000, 20000, 20000, 20000], 
                        color: 'rgba(0,0,0,0.1)',
                        barGap:'-100%',
                        barWidth: 16,
                        label: {
                            formatter:function(param){
                                return '{a|' + self.echartLabelRight1(param) + '}'
                            },
                            rich: {
                                a: {
                                    color: '#F1BC30',
                                    fontFamily: 'Microsoft YaHei',
                                    fontSize: 15
                                },
                                b: {
                                    color: 'black',
                                    fontFamily: 'Microsoft YaHei',
                                    fontSize: 13,
                                    fontWeight: 'bold'
                                }
                            },
                            show:true,
                            position:'right',
                            color:'black'
                        },
                        itemStyle: {
                            barBorderRadius: [18, 18, 18 ,18]
                        }
                        
                    }
                ]
            };
            this.echartOptionRight2 = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)',
                    show:true,
                    transitionDuration: 0,//解决echarts图闪动
                },
                legend: {
                    orient: 'vertical',
                    right: '5',
                    top: 'center',
                    data: ['高危漏洞','中危漏洞','低危漏洞'],
                    show:true,
                    icon: 'circle',
                    itemGap: 20,
                    formatter:function(param){
                        return param +':  ' + '{a|' + self.switchValueRight2(param) + '}' + '  项';
                    },
                    textStyle: {
                        fontSize: 16,
                        fontWeight:'bold',
                        rich:{
                            a: {
                                fontSize: 16,
                                // fontWeight: 'bold',
                            },
                        },
                    },
                },
                series: [
                    {
                        name: '统计信息',
                        type: 'pie',
                        radius: ['50%', '75%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center',
                            fontSize:40
                        },
                        center: ['27%', 'center'],
                        emphasis: {
                            label:{
                                show: true,
                                formatter:function(param){
                                    return param.value
                                },
                                fontSize:30,
                                fontWeight:'bold'
                            },
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            {value: 120, name: '高危漏洞',itemStyle:{color: '#B3D465'}},
                            {value: 30, name: '中危漏洞',itemStyle:{color: '#00B7EE'}},
                            {value: 30, name: '低危漏洞',itemStyle:{color: '#F1BC30'}},
                        ]
                    }
                ]
            }
        },
        methods: {
            //地图区域发生变化
            changeMapArea() {
                //重新渲染地图组件
                this.reloadMap();
                //todo: 修改各个区域的数据
            },
            //强制重新渲染地图
            reloadMap() {
                // 移除组件
                this.mapShow = false;
                // 在组件移除后，重新渲染组件
                // this.$nextTick可实现在DOM 状态更新后，执行传入的方法。
                this.$nextTick(() => {
                    this.mapShow = true;
                })
            },
            echartLabelLeft1(param) {
                switch(param.name) {
                    case '气象':
                        return this.echartDataLeft1[0];
                    case '洪涝':
                        return this.echartDataLeft1[1];
                    case '地震':
                        return this.echartDataLeft1[2];
                    default: return 0;
                }
            },
            echartLabelLeft2(param) {
                switch(param.name) {
                    case '管气泄露':
                        return this.echartDataLeft2[0];
                    case '大雨内涝':
                        return this.echartDataLeft2[1];
                    case '断热':
                        return this.echartDataLeft2[2];
                    case '断气':
                        return this.echartDataLeft2[3];
                    case '断电':
                        return this.echartDataLeft2[4];
                    case '断水':
                        return this.echartDataLeft2[5];
                    default: return 0;
                }
            },
            echartLabelRight1(param) {
                switch(param.name) {
                    case '深圳北站':
                        return this.echartDataRight1[0];
                    case '上海虹桥国际机场':
                        return this.echartDataRight1[1];
                    case '北京西站':
                        return this.echartDataRight1[2];
                    case '北京首都国际机场':
                        return this.echartDataRight1[3];
                    default: return 0;
                }
            },
            echartTipLeft2(param) {
                let name = param[0].name;
                let value = param[0].value;
                return `<p style='text-align:center'>${name}预警次数: ${value}</p> `;
            },
            echartTipLeft3(param) {
                let name = param[0].name;
                let value = param[0].value;
                return `<p style='text-align:center'>${name}预警次数: ${value}</p> `;
            },
            echartTipRight1(param) {
                let name = param[0].name;
                let value = param[0].value;
                return `<p style='text-align:center'>${name}人流(人/次): ${value}</p> `;
            },
            switchValueRight2(name) {
                switch(name) {
                    case '高危漏洞': return this.echartDataRight2[0];
                    case '中危漏洞': return this.echartDataRight2[1];
                    case '低危漏洞': return this.echartDataRight2[2];
                }
            },
            initEchart(container, option) {
                let e = this.$echarts.init(container);
                e.setOption(option);
                return e;
            },

        },
        mounted() {
            this.echartObjLeft1 = this.initEchart(this.$refs.echartLeft1, this.echartOptionLeft1);
            this.echartObjLeft2 = this.initEchart(this.$refs.echartLeft2, this.echartOptionLeft2);
            this.echartObjLeft3 = this.initEchart(this.$refs.echartLeft3, this.echartOptionLeft3);
            this.echartObjRight1 = this.initEchart(this.$refs.echartRight1, this.echartOptionRight1);
            this.echartObjRight2 = this.initEchart(this.$refs.echartRight2, this.echartOptionRight2);
        },
        components: {
            BaseMap,
        },
    }
</script>

<style scoped lang="less">
    .el-select-dropdown__item{
        text-align: center;
    }
    .el-select-dropdown__item.selected {
        font-weight: normal;
        background: #faf0e4;
        color: @font_color;
    }
    .home {
        height: 100%;
        width: 100%;
        padding: 0;
        color: @font_color;
        // 公共样式
        div.container {
            padding: 0.02rem 0.01rem 0.01rem 0.01rem;
            box-sizing: border-box;
            background-color: @color3;
            font-size: 0.016rem;
            p.title {
                font-size: 0.02rem;
                font-weight: bold;
                line-height: 0.026rem;
                height: 0.026rem;
            }
        }
        // end
        .left-div{
            position: absolute;
            margin: .015rem 0 .015rem .015rem;
            width: calc(30% - .015rem);
            height: calc(100% - .03rem);
            left: 0%;
            div.left-1 {
                height: calc( (100% - 0.04rem) * 0.32);
                margin-bottom: 0.02rem;
                div.c-left {
                    display: inline-flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    width: 31%;
                    height: 70%;
                    margin-top: 5%;
                    float: left;
                    font-weight: bold;
                    border-right: 1px @color6 dashed;
                    box-sizing: border-box;
                    span[number] {
                        color: @color1;
                        font-size: 0.03rem;
                    }
                    span[floor] {
                        padding-bottom: 0.005rem
                    }
                }
                div.c-right {
                    display: inline-block;
                    width: 69%;
                    height: calc(100% - 0.026rem);
                }
            }
            div.left-1.heigher {
                height: calc( (100% - 0.04rem) * 0.36);
                margin-bottom: 0;
            }
        }

        .center-div{
            position: absolute;
            margin: .015rem;
            width: calc(40% - .03rem);
            height: calc(100% - .03rem);
            left: 30%;
            background: #ffffff;
        }

        .right-div{
            position: absolute;
            margin: .015rem .015rem .015rem 0;
            width: calc(30% - .015rem);
            height: calc(100% - .03rem);
            right: 0%;
            div.right-1 {
                height: calc( (100% - 0.04rem) * 0.3);
                margin-bottom: 0.02rem;
                div.echartRight1 {
                    height: calc(100% - 0.026rem);
                }
            }
            div.right-2 {
                height: calc( (100% - 0.04rem) * 0.4);
                margin-bottom: 0.02rem;
                div.left {
                    display: inline-flex;
                    width: calc(32% - 0.001rem);
                    margin: 0.017rem 0;
                    border-right: 1px #dddddd dashed;
                    height: calc(100% - 0.026rem - 0.037rem);
                    float: left;
                    flex-direction: column;
                    font-weight: bold;
                    div.item {
                        height: 50%;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        & > span {
                            padding-bottom: 0.007rem;
                        }
                        span[number] {
                            color: @color1;
                            font-size: 0.03rem;
                            padding-right: 0.007rem;
                        }
                        span[percent] {
                            padding-left: 0.02rem;
                        }
                    }
                }
                div.right {
                    display: inline-block;
                    margin: 0.017rem 0 0.02rem 0;
                    width: 68%;
                    height: calc(100% - 0.026rem - 0.037rem);
                    font-weight: bold;
                    p[text] {
                        height: 0.03rem;
                        line-height: 0.03rem;
                        text-align: center;
                    }
                    div.echartRight2 {
                        height: calc(100% - 0.03rem);
                    }
                }


            }
            div.right-3 {
                height: calc( (100% - 0.04rem) * 0.3);
                padding: 0.02rem 0 0.01rem 0;
                p.title {
                    padding:0 0.01rem;
                }
                p.option-bar {
                    padding:0.005rem 0.01rem;
                    height: 0.026rem;
                    line-height: 0.026rem;
                    font-size: 0.02rem;
                    span.option {
                        padding-right: 0.02rem;
                        a.data-omit {
                            width: .032rem;
                        }
                    }
                    span.active {
                        color: @color1;
                    }
                    span.option:hover {
                        cursor: pointer;
                        color: @color1;
                    }
                    span.option a:hover {
                        background: url('../../../../assets/images/icon/省略号hover.png') no-repeat center;
                    }
                }
                p.category {
                    height: 0.026rem;
                    line-height: 0.026rem;
                    font-size: 0.017rem;
                    padding: 0 0.025rem 0 0.01rem;
                    background-color: #FCF7F1;
                    span.name {
                        float: left;
                    }
                    span.type {
                        float: right;
                    }
                }
                div.content-row {
                    height: calc((100% - 0.088rem)/3);
                    line-height: 0.04rem;
                    p.item-1 {
                        display: inline-block;
                        width: 10%;
                        text-align: center;
                    }
                    p.item-2 {
                        display: inline-block;
                        width: 75%;

                    }
                    p.item-3 {
                        display: inline-block;
                        width: 15%;
                        text-align: right;
                        padding-right: 0.025rem;
                        box-sizing: border-box;
                    }
                    .common-img{
                        width: .04rem;
                        height: .04rem;
                        display: inline-block;
                        vertical-align: middle;
                    }
                    .number-1 {
                        background: url('../../../../assets/images/icon/number-1.png') no-repeat center;
                    }
                    .number-2 {
                        background: url('../../../../assets/images/icon/number-2.png') no-repeat center;
                    }
                    .number-3 {
                        background: url('../../../../assets/images/icon/number-3.png') no-repeat center;
                    }
                }
            }
        }
    }
</style>